<template>
  <div class="App">
    <h1 class="content">我是APP</h1>
    <input type="text" ref="iptEle" />
    <button @click="getMsg">获取输入框的值</button>
    <Count />
  </div>
</template>

<script>
import Count from "@/components/Count";
export default {
  name: "App",
  components: {
    Count,
  },
  methods: {
    /*
      点击按钮手机表单的值：
        推荐方法：把表单和数据进行数据双向绑定
        直接获取数据的值即可

      ref的使用：
        如果想要获取某个真实dom
        则在当前谋爱元素添加一个ref属性
        值为一个字符串名称

        当模板渲染后，在当前的组件实例上的$refs对象中
        就会有一个当前字符串名称的属性
        值为被设置ref的真实dom

    */

   getMsg() {
    console.log(this);
    console.log(this.$refs.iptEle.value);
   }
  }
};
</script>

<style scoped>
.App {
  border: 1px solid #000;
}
.content {
  background: pink;
}

.App >>> .count {
  background: yellow;
}
</style>
